<template>
  <div class="filter-bar">
    <!-- 服务分类 -->
    <div class="filter-section">
      <span class="filter-title">服务分类</span>
      <div class="filter-options">
        <span
            v-for="(category, index) in serviceCategories"
            :key="index"
            :class="{'selected': selectedServiceCategory === category}"
            @click="selectServiceCategory(category)"
        >
          {{ category }}
        </span>
      </div>
    </div>

    <!-- 地理位置 -->
    <div class="filter-section">
      <span class="filter-title">地理位置</span>
      <div class="filter-options">
        <span
            v-for="(location, index) in locations"
            :key="index"
            :class="{'selected': selectedLocation === location}"
            @click="selectLocation(location)"
        >
          {{ location }}
        </span>
        <div class="custom-region" v-if="otherRegion">
          <input
              v-model="customRegion"
              type="text"
          />
          <button @click="setCustomLocation(customRegion)">确定</button>
        </div>
      </div>
    </div>

    <!-- 期望报酬 -->
    <div class="filter-section">
      <span class="filter-title">期望报酬</span>
      <div class="filter-options">
        <span
            v-for="(reward, index) in rewards"
            :key="index"
            :class="{'selected': selectedReward === reward}"
            @click="selectReward(reward)"
        >
          {{ reward }}
        </span>
        <div class="custom-reward" v-if="otherPayment">
          <input
              v-model="customMinReward"
              type="number"
          />
          <span>-</span>
          <input
              v-model="customMaxReward"
              type="number"
          />
          <button @click="setCustomReward">确定</button>
        </div>
        <div class="payment-unit">
          <span>单位：</span>
          <select id="unit" v-model="selectedUnit" @change="onUnitChange">
            <option value="次">次</option>
            <option value="小时">小时</option>
            <option value="天" selected>天</option>
            <option value="月">月</option>
            <option value="年">年</option>
          </select>
        </div>

      </div>
    </div>

    <!-- 团队情况 -->
    <div class="filter-section" style="border: none">
      <span class="filter-title">团队情况</span>
      <div class="filter-options">
        <span
            v-for="(team, index) in teamSizes"
            :key="index"
            :class="{'selected': selectedTeamSize === team}"
            @click="selectTeamSize(team)"
        >
          {{ team }}
        </span>
      </div>
    </div>

    <!-- 已选条件展示 -->
    <div class="selected-filters">
      <div  class="title">已选条件: </div>
      <div class="content" v-if="selectedServiceCategory">
        {{ selectedServiceCategory }}
        <img src="../assets/images/filterDelete.png" alt="" @click="clearSelectedServiceCategory">
      </div>
      <div class="content" v-if="selectedReward">
        {{ selectedReward }}
        <img src="../assets/images/filterDelete.png" alt="" @click="clearSelectedReward">
      </div>
      <div class="content" v-if="selectedLocation">
        {{ selectedLocation }}
        <img src="../assets/images/filterDelete.png" alt="" @click="clearSelectedLocation">
      </div>
      <div class="content" v-if="selectedServiceTime">
        {{ selectedServiceTime }}
        <img src="../assets/images/filterDelete.png" alt="" @click="clearSelectedServiceTime">
      </div>
      <div class="content" v-if="selectedTeamSize">
        {{ selectedTeamSize }}
        <img src="../assets/images/filterDelete.png" alt="" @click="clearSelectedTeamSize">
      </div>
      <button v-if="hasFilters" @click="clearFilters">清空筛选条件</button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'FilterBar',
  setup(props, { emit }) {
    const serviceCategories = ['专业技能服务', '生活服务', '商务合作服务', '创意娱乐服务', '其他服务'];
    const locations = ['线上', '北京', '上海', '天津', '重庆', '广州', '深圳', '苏州', '南京', '杭州', '大连', '成都', '武汉', '西安', '其他'];
    const rewards = ['100以下', '100-500', '500-1k', '1k以上', '自定义'];
    const teamSizes = ['2-5人', '6-10人', '10人以上', '不组队'];

    // 已选条件
    const selectedServiceCategory = ref('');
    const selectedLocation = ref('');
    const selectedReward = ref('');
    const selectedUnit = ref('天')
    const selectedTeamSize = ref('');
    const customMinReward = ref('');
    const customMaxReward = ref('');
    const customRegion = ref('')


    const otherRegion = ref(false)
    const otherPayment = ref(false)


    // 筛选条件更新
    const updateSelectedFilter = () => {
      let paymentType;
      if (selectedReward.value === "100以下") paymentType = 0;
      else if (selectedReward.value === "100-500") paymentType = 1;
      else if (selectedReward.value === "500-1k") paymentType = 2;
      else if (selectedReward.value === "1k以上") paymentType = 3;
      else if (selectedReward.value === null || selectedReward.value === '') paymentType = null;
      else paymentType = 4;

      let groupType;
      if (selectedTeamSize.value === "2-5人") groupType = 0;
      else if (selectedTeamSize.value === "6-10人") groupType = 1;
      else if (selectedTeamSize.value === "10人以上") groupType = 2;
      else if (selectedTeamSize.value === "不组队") groupType = 3;

      const filterData = paymentType === 4
          ? {
            category: selectedServiceCategory.value,
            region: selectedLocation.value,
            paymentType: paymentType,
            minPayment: customMinReward.value,
            maxPayment: customMaxReward.value,
            unit: selectedUnit.value,
            groupType: groupType,
          }
          : {
            category: selectedServiceCategory.value,
            region: selectedLocation.value,
            paymentType: paymentType,
            unit: selectedUnit.value,
            groupType: groupType,
          };
      emit("filter-changed", filterData);
    };

    // 计算属性，判断是否有已选的筛选条件
    const hasFilters = computed(() =>
        selectedServiceCategory.value ||
        selectedLocation.value ||
        selectedReward.value ||
        selectedTeamSize.value
    );

    // 选择条件方法
    const selectServiceCategory = (category) => {
      selectedServiceCategory.value = category;
      updateSelectedFilter();
    };
    const selectLocation = (location) => {
      if(location === '其他'){
        otherRegion.value = true;
      }
      else {
        selectedLocation.value = location;
        updateSelectedFilter();
      }
    };
    const setCustomLocation = (location) => {
      selectedLocation.value = location;
      otherRegion.value = false;
      updateSelectedFilter();
    };
    const selectReward = (reward) => {
      if (reward === '自定义') {
        otherPayment.value = true;
      } else {
        selectedReward.value = reward;
        updateSelectedFilter(); // 选择标准报酬时直接更新筛选条件
      }
    };
    const setCustomReward = () => {
      if (customMinReward.value !== null && customMaxReward.value && customMinReward.value <= customMaxReward.value) {
        selectedReward.value = `${customMinReward.value}-${customMaxReward.value}`;
        otherPayment.value = false;
        updateSelectedFilter(); // 更新筛选条件
      } else {
        alert("请输入有效的自定义报酬范围");
      }
    };
    const selectTeamSize = (team) => {
      selectedTeamSize.value = team;
      updateSelectedFilter();
    };
    const onUnitChange = () => {
      updateSelectedFilter();
    };

    // 删除单个选项方法
    const clearSelectedServiceCategory = () => {
      selectedServiceCategory.value = '';
      updateSelectedFilter();
    };
    const clearSelectedLocation = () => {
      selectedLocation.value = '';
      updateSelectedFilter();
    };
    const clearSelectedReward = () => {
      selectedReward.value = null;
      customMinReward.value = null;
      customMaxReward.value = null;
      updateSelectedFilter();
    };
    const clearSelectedTeamSize = () => {
      selectedTeamSize.value = null;
      updateSelectedFilter();
    };

    // 清空所有筛选条件
    const clearFilters = () => {
      selectedServiceCategory.value = '';
      selectedLocation.value = '';
      selectedReward.value = null;
      selectedTeamSize.value = null;
      updateSelectedFilter();
    };


    return {
      serviceCategories,
      locations,
      rewards,
      teamSizes,
      selectedServiceCategory,
      selectedLocation,
      selectedReward,
      selectedUnit,
      selectedTeamSize,
      onUnitChange,
      customMinReward,
      customMaxReward,
      customRegion,
      otherRegion,
      otherPayment,
      updateSelectedFilter,
      hasFilters,
      selectServiceCategory,
      selectLocation,
      setCustomLocation,
      selectReward,
      setCustomReward,
      selectTeamSize,
      clearSelectedServiceCategory,
      clearSelectedLocation,
      clearSelectedReward,
      clearSelectedTeamSize,
      clearFilters
    };
  }
};
</script>


<style scoped>
.filter-bar {
  position: absolute;
  left: 10.9375vw;
  top: 22.5vh;
  width: 78.125vw;
  height: 30.6581vh;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.833vw;
  padding-left: 1.31vw;
  padding-right: 1.667vw;
  padding-top: 0.12vh;
  box-shadow: 0 1.5px 3.2px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;

}

.filter-section {
  display: flex;
  height: 5.926vh;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 0.0521vw solid rgba(217, 217, 217, 1);

}

.filter-title {
  height: 5.926vh;
  line-height: 5.926vh;
  font-size: 0.833vw;
  font-weight: 600;
  color: rgba(32, 32, 32, 1);
  text-align: left;
  vertical-align: middle;
  margin-right: 1.667vw;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25vw;
  height: 5.926vh;
  line-height: 5.926vh;
  align-items: center;
}

.filter-options span {
  cursor: pointer;
  transition: background 0.3s;
  font-size:  0.833vw;
  color: rgba(102, 102, 102, 1);
}

.filter-options span.selected {
  color: rgba(238, 113, 62, 1);
}

.custom-region {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}
.custom-region input {
  font-size: 0.729vw;
  width: 3.5vw;
  height: 2.8vh;
  border-radius: 0.417vw;
  border: 1px solid rgba(199, 199, 199, 1);
  box-sizing: border-box;
  text-align: center;
}
.custom-region input:focus{
  outline: none;
}
.custom-region button {
  border: none;
  cursor: pointer;
  width: 3.229vw;
  height: 2.8vh;
  line-height: 2.22vh;
  border-radius: 5.21vw;
  background: linear-gradient(221.64deg, rgba(238, 113, 62, 1) 0%, rgba(255, 140, 26, 1) 100%);
  font-size: 0.625vw;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.custom-reward {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;

}
.custom-reward input {
  font-size: 0.729vw;
  width: 3.5vw;
  height: 2.8vh;
  border-radius: 0.417vw;
  border: 1px solid rgba(199, 199, 199, 1);
  box-sizing: border-box;
  text-align: center;
}
.custom-reward input:focus{
  outline: none;
}
.custom-reward button {
  border: none;
  cursor: pointer;
  width: 3.229vw;
  height: 2.8vh;
  line-height: 2.22vh;
  border-radius: 5.21vw;
  background: linear-gradient(221.64deg, rgba(238, 113, 62, 1) 0%, rgba(255, 140, 26, 1) 100%);
  font-size: 0.625vw;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.payment-unit{
  height: 5.926vh;
  display: flex;
  align-items: center;
}
.payment-unit span{
  margin-right: 0.1vw;
}
select{
  font-size: 0.729vw;
  width: 3.5vw;
  height: 2.8vh;
  border-radius: 0.417vw;
  border: 1px solid rgba(199, 199, 199, 1);
  box-sizing: border-box;
  text-align: center;
}
select:focus{
  outline: none;
}

input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input::-webkit-outer-spin-button{
  -webkit-appearance: none !important;
}
/*input[type="number"]{
  -moz-appearance: textfield;
}*/

.selected-filters {
  position: absolute;
  display: flex;
  align-items: center;
  text-align: center;
  bottom: 2.76vh;
  gap: 1.25vw;
  width: fit-content;
  max-width: 75.15vw;
}
.selected-filters .title{
  height: 2.871vh;
  line-height: 2.871vh;
  font-size: 0.729vw;
  color: rgba(32, 32, 32, 1);
  text-align: left;
  vertical-align: middle;
  background-color: rgba(255, 255, 255, 1);
}
.selected-filters .content{
  position: relative;
  display: flex;
  flex-direction: column;
  width: fit-content;
  height: 2.871vh;
  line-height: 2.871vh;
  padding-left: 0.417vw;
  padding-right: 1.25vw;
  border-radius: 0.417vw;
  background: linear-gradient(221.64deg, rgba(238, 113, 62, 1) 0%, rgba(255, 140, 26, 1) 100%);
  font-size: 0.729vw;
  color: rgba(255, 255, 255, 1);
}
.selected-filters .content img{
  position: absolute;
  padding: 0;
  width: 0.625vw;
  height: 0.625vw;
  right: 0.417vw;
  top: 0.72vh;
}
.selected-filters button {
  border: none;
  cursor: pointer;
  border-radius: 0.417vw;
  width: fit-content;
  height: 2.871vh;
  line-height: 2.871vh;
  font-size: 0.729vw;
  color: rgba(32, 32, 32, 1);
  padding-left: 0.417vw;
  padding-right: 0.417vw;
}
</style>
